import { useState } from "react";

// 封装自定义Hook
// 问题: 布尔切换的逻辑 和当前组件耦合在一起 不方便复用
// 解决思路: 自定义Hook

// 自定义Hook命名以use开头
function useToggle() {
  // 可复用的逻辑代码
  const [show, setShow] = useState(true);
  const toggle = () => {
    setShow(!show);
  };
  // 将需要在其他组件中使用的状态和回调函数return
  return {
    show,
    toggle,
  };
}

function A() {
  // 在A组件中复用切换逻辑
  // 获取Hook中返回的状态和方法
  const { show, toggle } = useToggle();
  return (
    <>
      {show && <div>this is A</div>}
      <button onClick={toggle}>toggle</button>
    </>
  );
}

function App() {
  const { show, toggle } = useToggle();
  return (
    <>
      {show && <div>this is App</div>}
      <button onClick={toggle}>toggle</button>
      <A />
    </>
  );
}

export default App;
